
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../js/vue.js"></script>
  <style>
      .level1 {
          background-color: crimson;
      }

      .level2 {
          background-color: rgb(21, 155, 72);
      }

      .level3 {
          background-color: rgb(233, 67, 225);
      }
  </style>
</head>
<body>
  <div id="div1" class="level1" >
      <div>{{root}}</div>

      <level-two></level-two>
hr
      <level-third></level-third>
  </div>

  <script type="text/javascript">
    /*
      组件的层次引用。

    */

    // 2级组件
    Vue.component("level-two",{
        data: function() {
            return {
                two: "2级组件"
            }
        },
        template: `<div class='level2' >
            <div>{{two}}</div>
            <level-third></level-third>
            <level-third></level-third>
            <level-third></level-third>
            </div>
        `
    });

    // 3级组件
    Vue.component("level-third",{
        data: function() {
            return {
                third: "3级组件"
            }
        },
        template: `<div class="level3" >
                    <div>{{third}}</div>
                <!--<level-two></level-two>-->   <!--人为设置等级，理论上可以嵌套-->

                   </div>`
    });

    const vm = new Vue({
      el: '#div1',
      data: {
        root: '1级组件'
      }
    });
  </script>
</body>
</html>
